<template>
  <div class="interaction-home">
    <div v-if="$route.name==='interactionHome'">
      <crumb />
      <SelectCourseClass class="top-select" />
      <div class="main-contianer3 caseManage">
        <div class="top-content">
          <el-table :data="caseList" border style="width: 100%">
            <el-table-column align="center" prop="index" label="序号" width="80">
              <template slot-scope="scope">{{scope.$index + 1}}</template>
            </el-table-column>
            <el-table-column align="center" prop="resourceCaseName" label="案例名称">
            </el-table-column>
            <el-table-column align="center" prop="score" label="最新得分" width="200">
            </el-table-column>
            <el-table-column align="center" prop="finishedFlag" label="状态" width="200">
              <template slot-scope="scope">
                <el-tag type="info" v-if="scope.row.finishedFlag === '0'">未开始</el-tag>
                <el-tag type="success" v-if="scope.row.finishedFlag === '1'">进行中</el-tag>
                <el-tag type="danger" v-if="scope.row.finishedFlag === '2'">已完成</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="300">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="handleView(scope.row.lessonICaseId,scope.row.resourceCaseId, scope.row.finishedFlag)">进入案例</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <router-view v-else/>
  </div>
</template>

<script>
import { index } from '@/api/student/training/interaction'
import SelectCourseClass from '@/components/SelectCourseClass'
export default {
  name: 'interaction-home',
  data () {
    return {
      caseList: []
    }
  },
  components: {
    SelectCourseClass
  },
  mounted () {
    this.interactionIndex()
  },
  methods: {
    async interactionIndex () {
      const res = await index()
      console.log(res)
      if (res.code === '200') {
        this.caseList = res.data.caseList
      } else {
        this.$message.error(res.message)
      }
    },
    handleView (lessonICaseId, resourceCaseId, finishedFlag) {
      if (finishedFlag === '2') {
        this.$router.push({
          name: 'interactionOver',
          query: {
            lessonICaseId: lessonICaseId,
            resourceCaseId: resourceCaseId
          }
        })
      } else {
        this.$router.push({
          name: 'interactionStart',
          query: {
            resourceCaseId: resourceCaseId
          }
        })
      }
    }
  }
}
</script>
<style scoped lang="scss" rel="stylesheet/scss">
.interaction-home {
  .caseManage {
    .top-content {
      width: 100%;
      background: #fff;
      .caseManage-top{
        display: flex;
        justify-content: flex-end;
        padding: 20px 10px;
        width: 100%;
      }
    }
  }
}

</style>
